<template>
  <div class="container page">
 <!-- <button style="width:80%">保存海报到相册</button> -->

    <!-- <canvas  canvas-id="firstCanvas" style='width:375px;height:530px'></canvas> -->
      <!-- <div style="text-align:center;margin:100rpx;margin-top:20rpx;"></div> -->
        <ul style="padding:30rpx"><img src="https://www.hatchdo.com/wxmini/Index/3.png" class="sy1" style="width:100%;" mode="widthFix" /></ul>
      <!-- <div style="text-align:center;margin:100rpx;margin-top:50rpx;"></div> -->

    <div class="flex">
        <ul class="flexs">
            <img :src="product.main_image" class="shop" />
        </ul>
        <ul class="flexs2">
            <!-- <p class="vvu">VVU</p> -->
            <p class="shopname" style="font-size:30rpx;margin-top:60rpx">{{product.name}}</p>
            <p class="zt" style="font-size:20rpx;">{{product.subtitle}}</p>
            <!-- <p class="zt" style="font-size:20rpx;">月销量:{{product.saled_num}}个</p>
            <p class="zt" style="font-size:20rpx;">库存:{{product.stock}}个</p> -->
            <p class="je">￥{{product.price}}</p>
        </ul>
    </div>
    <!-- <img style="width:100%;" :src="product.image_5" mode="widthFix" alt=""> -->

      <div style="text-align:center;margin:100rpx;margin-top:150rpx;"></div>
      <!-- <img src="https://www.hatchdo.com/wxmini/logo/logo.png" mode="widthFix"> -->

    <div class="flex">
        <ul class="flexs">
         <div style="margin-top:50rpx;"></div>
         <p style="text-align:right;font-size:30rpx">HATCHDO 好区多</p>
         <p style="text-align:right;font-size:10px">区区多有好商机</p>
        </ul>
        <ul class="flexs2">
            <div style="text-align:center">
                <img :src="imgUrl" mode="widthFix" style="width:200rpx;">
            </div>

        </ul>
    </div>

      <!-- <div style="text-align:center">
          <img :src="imgUrl" mode="widthFix" style="width:200rpx;">
      </div> -->
      

  </div>
</template>
<script>
//  
import {showSuccess, showModal} from '@/util'
import {get, post} from '@/util'
// import {get2, post2} from '@/server/api'
import config from '@/config'
export default {
  components: {
    // YearProgress
  },
  data () {
    return {
        id:'',
        product: {},
        imgUrl:""
    }
  },
  mounted () {
    // this.userinfo = wx.getStorageSync('userinfo')
  },
  onShareAppMessage() {
    return {
      title: `为女性恢复年轻及孩子健康成长提供一站式解决方案。`,
      // imageUrl: 'https://www.rrjiaoyi.com/static/rr-min/share/share.png',
      path: `/pages/hcdindex/main?shareuser=${wx.getStorageSync('user').id}`
    }
  },
  methods: {

    async get_product(id) {
      return await get(`geweb/product/get_product?id=${id}`, {}).then(result => {
        console.log(result.res)
        this.product = result.res;
      })
    },

    request (url, method, data, header = {}) {
        return new Promise((resolve, reject) => {
            wx.request({
            data,
            method,
            header,
            url: url,
            success: function (res) {
                resolve(res.data)
                reject(res.data)
            }
            })
        })
    },
      getQrcode() {
      
        // let url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wxc1a9d3f1f7014407&secret=570c484d05c9f4c6ec9b267c781ae04c"
        let url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wxa13b77d438fbf138&secret=ea9e4046d683d8ba429b08c5113ab0cc"
        let data = {}
        let url2 = "https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token="
        let data2 = {"scene": `shareid=${wx.getStorageSync('user').id}`}
        this.request(url, 'POST', data)
        .then(result => {
            // console.log(result.access_token)
            if (result.access_token) {

                // this.request(url2+result.access_token, 'POST', data2)
                // .then(result => {

                //     var base64Data = result.toString('base64'); 

                //     var array = wx.base64ToArrayBuffer(base64Data)

                //     var base64 = wx.arrayBufferToBase64(array)

                //     console.log(base64)

                //     base64Data = wx.arrayBufferToBase64(wx.base64ToArrayBuffer(base64Data)); 这句有问题

                //     base64Data = wx.base64ToArrayBuffer(base64Data).replace(/[\r\n]/g, "")

                //     this.imgUrl = "data:image/png;base64," + base64

                //     console.log(this.imgUrl)

                // })


            wx.request({

                url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token='+ result.access_token,
                
                method: "POST",
                
                responseType: 'arraybuffer', 
                
//                  data: {
//                   scene:'22a45fds' ,
//                   page: "pages/login/login",
//                   width: 280,
//                   is_hyaline: true
//                  },
                 data: data2,
                
                 header: {
                    'content-type': 'application/json;charset=utf-8'
                 },
                
                // success(res) {
                success: res => {

                    console.log(res);
                    console.log(res.data);
                    
                    var base64 = wx.arrayBufferToBase64(res.data);

//                     console.log(base64);

                    this.imgUrl = "data:image/PNG;base64," + base64

                    }

             })




            }
        })

 


        // get(`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wxc1a9d3f1f7014407&secret=570c484d05c9f4c6ec9b267c781ae04c`, {}, {})
        // .then(result => {
        //     console.log(result) 
        // })

      },


      getQrcode2() {

//            wx.request({

//                 url: `http://192.168.110.155:8080/geweb/qrcode/get_qrcode?userid=${wx.getStorageSync('user').id}`,
//                 
//                 method: "POST",
//                 
//                  data: {},
//                 
//                  header: {
//                     'content-type': 'application/json;charset=utf-8'
//                  },
//                 
//                 success: res => {

//                     this.imgUrl = "data:image/PNG;base64," + res.data

//                     }

//              })

        return post(`geweb/qrcode/get_qrcode?userid=${wx.getStorageSync('user').id}&id=${decodeURIComponent(this.$root.$mp.query.id)}`, {}).then(result => {
            // console.log(wx.getStorageSync('user').id)
            // console.log(result)
               this.imgUrl = "data:image/PNG;base64," + result

        })

      }
  },
  mounted() {
   
// const fsm = wx.getFileSystemManager();

// var showImgData = this.imgUrl

//   console.log(showImgData)

// showImgData = showImgData.replace(/\ +/g, "");

// showImgData = showImgData.replace(/[\r\n]/g, "");

// const buffer = wx.base64ToArrayBuffer(showImgData);
// const buffer = showImgData
//   console.log('buffer', buffer)

// const fileName = wx.env.USER_DATA_PATH + '/share_img.png'
//   console.log('fileName', fileName)

// fsm.writeFileSync(fileName, this.imgUrl)

// const ctx = wx.createCanvasContext('firstCanvas')

// ctx.drawImage('https://www.hatchdo.com/wxmini/productdetail/40/5.png', 0, 0, 200, 200)
// ctx.draw()
// ctx.drawImage(fileName, 0, 0, 100, 100)

// ctx.draw()

    // let context = wx.createCanvasContext('firstCanvas')

  // const bgImg = new Image();
  // bgImg.src = 'https://www.hatchdo.com/wxmini/productdetail/40/5.png';
  // console.log(this.imgUrl)

  // const qrCode = createQrCode(this.imgUrl);
  // const qrCodeImg = new Image();
  // qrCodeImg.src = qrCode;

  // context.drawImage(fileName, 0, 0, 100, 100)
  // context.draw()

  },
  onShow () {

    this.getQrcode2()

    wx.showToast({
    title: '请截图保存你的专属海报',
    icon: 'none'
    })

    this.id = decodeURIComponent(this.$root.$mp.query.id)
    this.get_product(this.id)


    // wx.getFileSystemManager().writeFile({
    //     filePath:  `${wx.env.USER_DATA_PATH}/qrcode.png`, 
    //     encoding: 'base64', 

    //     success: res => { 
    //                 console.log("1111111111111")
    //             wx.saveImageToPhotosAlbum({
    //                 filePath: `${wx.env.USER_DATA_PATH}/qrcode.png`,

    //                 success(res) { 

    //                 console.log("2222")

    //                 }
    //             })

    //     }
    // })
 

  }
}
</script>

<style scoped lang='scss'>
.container{
  font-size: 30rpx;
}
page {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}

    .flex{
        display: flex;
        margin-top: 50rpx;
    }
    .flexs{
        flex: 1
    }
    .flexs2{
    flex: 1;
    margin-right: 30rpx;
    }
    .shop{
        width:350rpx;
        height:350rpx;
        margin-left: 20px;
       
        margin-right: 30px;
    }
    .vvu{
        font-size: 24px;
        margin-top: 10rpx;
    }
    .zt{
        font-size: 14px;
    }
    .shopname{
        margin-bottom: 15px;
    }
    .je{
        margin-top: 15px;
        background-color: #000000;
        color: #ffffff;
        width: 90px;
    }
</style>
